<template>
  <div class="commodity-property base-page-container">
    <!-- 顶部标签页 -->
    <el-tabs v-model="activeTab" class="property-tabs" @tab-change="handleTabChange">
      <el-tab-pane label="商品分类" name="商品分类">
        <CategoryTab/>
      </el-tab-pane>
      <el-tab-pane label="商品单位" name="商品单位">
        <UnitTab/>
      </el-tab-pane>
      <!--      <el-tab-pane label="商品品牌" name="商品品牌">-->
      <!--        <BrandTab />-->
      <!--      </el-tab-pane>-->
      <!--      <el-tab-pane label="商品属性" name="商品属性">-->
      <!--        <PropertyTab />-->
      <!--      </el-tab-pane>-->
      <el-tab-pane label="自定义字段" name="自定义字段">
        <CustomFieldTab/>
      </el-tab-pane>
      <!--      <el-tab-pane label="自定义规格" name="自定义规格">-->
      <!--        <CustomSpecTab />-->
      <!--      </el-tab-pane>-->
    </el-tabs>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import CategoryTab from './components/CategoryTab.vue'
import UnitTab from './components/UnitTab.vue'
import BrandTab from './components/BrandTab.vue'
import PropertyTab from './components/PropertyTab.vue'
import CustomFieldTab from './components/CustomFieldTab.vue'
import CustomSpecTab from './components/CustomSpecTab.vue'

// 激活的标签页
const activeTab = ref('商品分类')

// 标签页切换
const handleTabChange = (tab) => {
  console.log('切换到标签页:', tab)
}
</script>

<style scoped lang="scss">
.commodity-property {
  padding: 10px 20px 20px 20px;

  .property-tabs {
    margin-bottom: 20px;
    height: 100%;

    .el-tab-pane {
      height: 100%;
    }

    :deep(.el-tabs__header) {
      margin-bottom: 20px;
    }
  }

  .operation-bar {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;

    .search-box {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: auto;

      .search-input {
        width: 200px;
      }
    }
  }

  .main-content {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    min-height: 400px;
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;

    .total-info {
      color: #606266;
    }

    .page-size-select {
      width: 100px;
    }
  }
}

</style>